// import React, { Component } from 'react'
// 类组件
// export default class Table extends Component {
//   render() {
//     let { listData } = this.props
//     return (
//       <>
//         <table className="tableBox" border="1">
//           <thead>
//             <tr>
//               <th>编号</th>
//               <th>标题</th>
//               <th>价格</th>
//               <th>数量</th>
//               <th>总价</th>
//               <th>操作</th>
//             </tr>
//           </thead>
//           <tbody>
//             {listData.map((v) => {
//               return (
//                 <tr key={v.id}>
//                   <td>{v.id}</td>
//                   <td>{v.title}</td>
//                   <td>{v.price}</td>
//                   <td>
//                     <button
//                       disabled={v.num === 1}
//                       onClick={() => this.changeNum('-', v.id)}
//                     >
//                       -
//                     </button>
//                     {v.num}
//                     <button onClick={() => this.changeNum('+', v.id)}>+</button>
//                   </td>
//                   <td>{v.num * v.price}</td>
//                   <td>
//                     <button onClick={() => this.deleteItem(v.id)}>删除</button>
//                   </td>
//                 </tr>
//               )
//             })}
//           </tbody>
//         </table>
//         <p>总价为:{this.props.totalPrice}</p>
//       </>
//     )
//   }
//   changeNum = (type, id) => {
//     this.props.changeNum(type, id)
//   }
//   deleteItem = (id) => {
//     this.props.deleteItem(id)
//   }
//   totalPrice = () => {}
// }

// 函数组件
import React from 'react'

export default function Table(props) {
  let { listData } = props
  console.log(props)

  const changeNum = (type, id) => {
    props.changeNum(type, id)
  }
  const deleteItem = (id) => {
    props.deleteItem(id)
  }

  return (
    <>
      <table className="tableBox" border="1">
        <thead>
          <tr>
            <th>编号</th>
            <th>标题</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {listData.map((v) => {
            return (
              <tr key={v.id}>
                <td>{v.id}</td>
                <td>{v.title}</td>
                <td>{v.price}</td>
                <td>
                  <button
                    disabled={v.num === 1}
                    onClick={() => changeNum('-', v.id)}
                  >
                    -
                  </button>
                  {v.num}
                  <button onClick={() => changeNum('+', v.id)}>+</button>
                </td>
                <td>{v.num * v.price}</td>
                <td>
                  <button onClick={() => deleteItem(v.id)}>删除</button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
      <p>总价为:{props.totalPrice}</p>
    </>
  )
}
